<template>
    <div class="homeAdvertise">
        <!-- 筛选搜索 -->
        <div class="search_box">
            <el-row>
                <el-col :span="21" class="left_search">
                    <el-icon :size="16" color="#444545" style="vertical-align: middle;">
                        <Search />
                    </el-icon>
                    <span>筛选搜索</span>
                </el-col>
                <el-col :span="3" class="right_search">
                    <el-button @click="cleanSearch">重置</el-button>
                    <el-button type="primary" @click="fetch">查询搜索</el-button>
                </el-col>
            </el-row>
            <el-row class="input_search">
                <span>广告名称：</span>
                <el-input autocomplete="false" placeholder="广告名称" v-model="paramsToSend.name" />
                <span>广告位置：</span>
                <el-select v-model="paramsToSend.type" placeholder="全部">
                    <el-option label="APP首页轮播" value="1" />
                    <el-option label="PC首页轮播" value="0" />
                </el-select>
                <span>到期时间：</span>
                <el-config-provider :locale="zhCn">
                    <el-date-picker format="YYYY-MM-DD" value-format="YYYY-MM-DD" v-model="paramsToSend.endTime" type="date"
                        placeholder="请选择时间" />
                </el-config-provider>
            </el-row>

        </div>
        <!-- 数据列表 -->
        <div class="oprations_box">
            <div class="left_search">
                <el-icon :size="16" color="#444545" style="vertical-align: middle;">
                    <Tickets />
                </el-icon>
                <span>数据列表</span>
            </div>
            <div class="right_btn">
                <el-button @click="router.push('/sms/addAdvertise')">
                    添加广告
                </el-button>
            </div>
        </div>
        <!-- 品牌列表 -->
        <el-table ref="multipleTableRef" :data="list" style="width: 100%" @selection-change="handleSelectionChange"
            :cell-style="{ textAlign: 'center' }" :header-cell-style="{ textAlign: 'center', height: '50px' }" border>
            <el-table-column type="selection" width="55" />
            <el-table-column label="编号">
                <template #default="scope">{{ scope.row.id }}</template>
            </el-table-column>
            <el-table-column property="name" label="广告名称" />
            <el-table-column label="广告位置" show-overflow-tooltip>
                <template #default="{ row }">
                    {{ row.type == 1 ? 'APP首页轮播' : 'PC首页轮播' }}
                </template>
            </el-table-column>
            <el-table-column label="广告图片" show-overflow-tooltip>
                <template #default="{ row }">
                    <img class="picImg" :src="row.pic" alt="" style="height: 80px;">
                </template>
            </el-table-column>
            <el-table-column label="时间" width="240" show-overflow-tooltip>
                <template #default="{ row }">
                    <div>开始时间：{{ formateTime(row.startTime) }}</div>
                    <div>到期时间：{{ formateTime(row.endTime) }}</div>
                </template>
            </el-table-column>
            <el-table-column label="上线/下线">
                <template #default="{ row }">
                    <el-switch v-model="row.status" :active-value="1" :inactive-value="0"
                        @change="switchChange(row)"></el-switch>
                </template>
            </el-table-column>
            <el-table-column property="clickCount" label="点击次数" show-overflow-tooltip>
            </el-table-column>
            <el-table-column property="orderCount" label="生成订单" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="{ row }">
                    <el-button type="primary" link @click="router.push('/sms/updateAdvertise?id=' + row.id)">编辑</el-button>
                    <el-button type="primary" link @click="delAdvertise(row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 左侧下拉操作 -->
        <div class="select_hand">
            <el-select v-model="batchVal" placeholder="批量操作">
                <el-option label="删除" value="1" />
            </el-select>
            <el-button type="primary" @click="batchDel">确定</el-button>
        </div>
        <!-- 分页 -->
        <PaginationTwo v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[5, 10, 15]"
            :total="total" />
    </div>
</template>
<script setup lang='ts'>
import { ApiQueryAdvertiseList, ApiUpdateAdvertiseStatus, ApiDelAdvertise } from '@/http/api'
import useTable from '@/hooks/useTable'
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { formateTime } from '@/utils'
import { Search, Tickets } from '@element-plus/icons-vue'
import PaginationTwo from '@/components/Pagination/PaginationTwo.vue'
// @ts-ignore
import { ElMessage, ElMessageBox } from 'element-plus'
// @ts-ignore
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

const router = useRouter();



// 定义要删除的广告的参数
const delAdvertiseId = ref<number[]>([])

// 选中数据change事件
const multipleSelection = ref<IAdvertiseListModel[]>([])
const handleSelectionChange = (val: IAdvertiseListModel[]) => {
    multipleSelection.value = val
    delAdvertiseId.value = val.map(item => {
        return item.id
    })

}

const searchParams = reactive({
    endTime: '',
    name: '',
    type: '',
    pageSize: 5,
})

const batchVal = ref<string>('')

const paramsToSend = reactive({ ...searchParams }) // 先复制一份，以免影响到原有数据

// 避免传递空数据
Object.keys(paramsToSend).forEach((key) => {
    const k = key as keyof typeof searchParams; // 进行类型断言，指定 key 的类型为 "endTime"、"name"、"type" 或 "pageSize"
    if (paramsToSend[k] === '') {
        delete paramsToSend[k];
    }
});
const cleanSearch = () => {
    Object.assign(paramsToSend, searchParams)
}

// 修改上下线状态
const switchChange = (advertise: IAdvertiseListModel) => {
    ElMessageBox.confirm('是否要修改上线/下线状态?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
    }).then(() => {
        ApiUpdateAdvertiseStatus({
            id: advertise.id,
            status: advertise.status
        }).then(res => {
            if (res.code === 200) {
                ElMessage({
                    type: 'success',
                    message: '修改成功'
                })
                fetch()
            }
        })
    }).catch(() => {
        ElMessage({
            type: 'success',
            message: '已取消操作'
        })
        fetch()
    })
}

// 删除广告
const delAdvertise = (id: number) => {
    ElMessageBox.confirm('是否要删除该广告?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        ApiDelAdvertise(id).then(res => {
            if (res.code === 200) {
                ElMessage({
                    type: 'success',
                    message: '删除成功！'
                })
                fetch()
            }
        }).catch(() => { })
    })
}

// 批量删除广告
const batchDel = () => {
    if (delAdvertiseId.value.length == 0) {
        ElMessage({
            type: 'warning',
            message: '请选择一条记录'
        })
        return;
    }
    if (batchVal.value == '') {
        ElMessage({
            type: 'warning',
            message: '请选择批量操作类型'
        })
        return;
    }
    ElMessageBox.confirm('是否要删除该广告?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
    }).then(() => {
        ApiDelAdvertise(delAdvertiseId.value).then(res => {
            if (res.code === 200) {
                ElMessage({
                    type: 'success',
                    message: '删除成功！'
                })
                fetch()
            }
        }).catch(() => { })
    })
}

const { list, pageNum, pageSize, total, fetch } = useTable(ApiQueryAdvertiseList, paramsToSend)
// fetch();
</script>
<style lang="less" scoped>
.homeAdvertise {
    .search_box {
        padding: 20px;
        box-shadow: 0 0 4px 2px #eee;
        margin-bottom: 20px;
        border-radius: 2px;
        // 二十四、将搜索框部分粘性定位到顶部
        position: sticky;
        top: -20px;
        z-index: 2;
        background-color: rgba(255, 255, 255, 0.9);

        // 右边按钮
        .right_search {
            display: flex;
            align-items: center;
            justify-content: right;
        }

        .input_search {
            display: flex;
            align-items: center;

            span {
                font-size: 14px;
                color: #606266;
                margin-left: 30px;
            }

            .el-input {
                width: 200px;
            }
        }
    }

    .oprations_box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        box-shadow: 0 0 4px 2px #eee;
        margin-bottom: 20px;
        border-radius: 2px;
    }

    .select_hand {
        margin-top: 20px;
        float: left;

        .el-button {
            margin-left: 20px;
        }
    }

    .picImg {
        width: auto;
        object-fit: cover;
    }
}
</style>